<template>
	<view class="app">
		<view class="charge_bg">
			<view class="mine">￥{{ vk.pubfn.priceFilter(money) }}</view>
			<view class="list_bg">
				<view class="title">请选择充值金额</view>
				<view class="list">
					<view v-for="item in list" class="item" :key="item._id" :class="{ green: select == item._id }"
						@tap="select = item._id">
						<text>充{{ parseInt(vk.pubfn.priceFilter(item.get)) }}</text>
						<text class="text">送{{ parseInt(vk.pubfn.priceFilter(item.send)) }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="payment_bg">
			<view class="title">选择充值方式</view>
			<view class="item" @tap="way = 'wxpay'">
				<image class="logo" src="@/static/mine/pay_weixin.png"></image>
				<text class="text">微信支付</text>
				<image class="icon" :src="show('wxpay')"></image>
			</view>

			<view class="item" @tap="way='alipay'">
				<image class="logo" src="@/static/mine/pay_ali.png"></image>
				<text class="text">支付宝支付</text>
				<image class="icon" :src="show('alipay')"></image>
			</view>
		</view>
		<view class="agree" @tap="checked = !checked">
			<image class="icon" :src="show2"></image>
			<text class="text">我已认真阅读并同意</text>
			<text @tap.stop="vk.navigateTo('/pages/login/agreement?type=CZXY')">
				《平台充值协议》
			</text>
		</view>
		<view class="btn" @tap="pay">充值</view>
		<pay-balance-recharge ref="vkPay"></pay-balance-recharge>
	</view>
</template>

<script>
	var vk = uni.vk // vk依赖
	import payBalanceRecharge from "./components/pay-balance-recharge"

	export default {
		components: {
			payBalanceRecharge
		},
		data() {
			return {
				list: [],
				select: "",
				way: "",

				checked: false
			}
		},
		onLoad(options = {}) {
			this.options = options
			this.getMyInfo()
		},
		onShow() {
			this.getList()
		},
		computed: {
			show2() {
				let a = require("@/static/home/choose.png")
				let b = require("@/static/home/choose_no.png")
				return this.checked ? a : b
			},
			money() {
				return vk.getVuex("$user.userInfo.account_balance.balance")
			}
		},
		methods: {
			show(type) {
				let a = require("@/static/home/choose.png")
				let b = require("@/static/home/choose_no.png")
				return this.way == type ? a : b
			},
			// 更新vuex内的用户信息
			getMyInfo() {
				vk.callFunction({
					url: "client/user.getMyInfo"
				})
			},
			// 获取套餐
			getList() {
				vk.callFunction({
					url: "client/pub.getRechargeList"
				}).then(res => {
					this.list = res.data
					this.select = res.data[0]._id
				})
			},
			// 充值
			pay() {
				if (!this.checked) return vk.toast("请勾选《平台充值协议》")
				let item = vk.pubfn.getListItem(this.list, "_id", this.select)
				if (!item) return vk.toast("请选择充值金额")

				let that = this
				// 防抖函数
				vk.pubfn.debounce(() => {
					that.$refs.vkPay.createPayment({
						provider: that.way,
						total_fee: item.price,
						total_balance: item.real_get,
						success: data => {
							vk.toast(data.msg, "ok", () => {
								uni.$emit("walletUpdate")
								uni.navigateBack()
							})
						}
					})
				}, 600)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app {
		height: 100vh;
		// #ifdef H5
		height: calc(100vh - 88rpx);
		// #endif
		background-color: #f4f6f9;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		line-height: 45rpx;
		color: #333333;
	}

	.charge_bg {
		background-color: #ffffff;
		padding: 36rpx 0 36rpx 30rpx;
		border-top: 1rpx solid #f4f6f9;

		.mine {
			font-size: 32rpx;
			font-weight: bold;
			line-height: 45rpx;
			color: #333333;

			&::before {
				content: "可用金额：";
				font-size: 26rpx;
				font-weight: 500;
				line-height: 40rpx;
				color: #999999;
			}
		}

		.list_bg {
			padding-top: 28rpx;

			.list {
				display: flex;
				flex-wrap: wrap;
			}

			.item {
				width: 30.2%;
				height: 144rpx;
				background-color: #f5f5f5;
				border-radius: 4rpx;
				margin: 20rpx 20rpx 0 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				line-height: 45rpx;
				color: #333333;
				font-weight: bold;

				.text {
					font-size: 24rpx;
					line-height: 37rpx;
					color: #999999;
					font-weight: normal;
				}
			}

			.green {
				color: #24c388;
				background-color: rgba(58, 181, 74, 0.04);
				border: 1rpx solid #24c388;

				.text {
					color: #24c388;
				}
			}
		}
	}

	.payment_bg {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 36rpx 30rpx;

		.item {
			display: flex;
			align-items: center;
			padding: 36rpx 0 0 14rpx;
		}

		.text {
			flex: 1;
			padding-left: 14rpx;
		}

		.logo {
			width: 50rpx;
			height: 50rpx;
		}

		.icon {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.agree {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		padding-top: 40rpx;
		color: #24c388;

		.icon {
			width: 32rpx;
			height: 32rpx;
		}

		.text {
			color: #333;
			padding-left: 12rpx;
		}
	}

	.btn {
		margin: 160rpx 30rpx 0;
		font-size: 28rpx;
		padding: 18rpx;
		background-color: #24c388;
		border-radius: 44rpx;
		text-align: center;
		color: #fff;
	}
</style>